<template>
	<view class="container">
		<view class="header">
			<view class="line110"><i-icon icon="iconbao_1" class="middle" type="single" size="60rpx" color="#333"></i-icon></view>
			<view class="text1">消费者保障服务</view>
			<view class="font-30">保证金可退,保证交易安全</view>
		</view>
		<view class="mt-20" v-if="isPay">
			<view class="boxS ispay mb_20">
				<view class="jine-two">
					<view class="font-34 color-333 font-bold pad-t-b-10">已开通B2B {{ returnIder().label }}</view>
					<view class="font-28 color-666">冻结金额：</view>
					<view class="jine-two-two flex">
						<view class="flex-ac-sb width-80">
							<text class="text1">￥</text>
							<text class="money">{{ returnIder().money }}</text>
							<text class="text1">元</text>
						</view>
						<view class="flex-ac-sb width-20 u-text-right line38"><i-icon icon="iconsuo" class="middle" type="single" size="50rpx" color="#FBD220"></i-icon></view>
					</view>
				</view>
			</view>
			<view class="u-text-center font-26 color-FBB000 pad-t-b-10"><navigator url="/pages_common/payFlies/bzj">《7迈车保证金协议》</navigator></view>
			<view class="u-text-center font-26 color-999">
				如有疑问请联系客服：
				<text class="color-FBB000" @click="call">4000909987</text>
			</view>
		</view>
		<view class="" v-else>
			<view class="boxS jine">
				<!-- 	<u-tabs
				:active-item-style="{ color: '#343434' }"
				:list="list"
				:is-scroll="false"
				active-color="#FBB000"
				height="89"
				bar-width="180"
				bar-height="6"
				:current="current"
				@change="change"
			></u-tabs> -->
				<view class="jine-two">
					<view class="jine-two-head">开通需冻结金额：</view>
					<view class="jine-two-two">
						<text class="text1">￥</text>
						<text>{{ returnIder().money }}</text>
						<text class="text1">元</text>
					</view>
				</view>
			</view>
			<view class=" font-26 color-999 ispay" @click="agree = !agree">
				<i-icon icon="iconxuanzhong" class="texttop" type="single" size="36rpx" :color="agree ? '#FBD220' : '#999'"></i-icon>
				<text class="ml-10">已阅读并同意：</text>
				<view class="inline-block color-FBB000"><navigator class="inline-block" url="/pages_common/payFlies/bzj">《7迈车保证金协议》</navigator></view>
			</view>
			<view class="payDate boxS">
				<view class="p-head">选择支付方式</view>
				<view class="pay-mind">
					<radio-group @change="radioChange">
						<label>
							<view class="radio-item">
								<view class="left">
									<i-icon icon="iconzhifubao" class="middle mr-10" type="single" size="60rpx" color="#02A9F1"></i-icon>
									支付宝支付
								</view>
								<view class="right"><radio value="0" color="#FBD220" /></view>
							</view>
						</label>
						<label>
							<view class="radio-item">
								<view class="left">
									<i-icon icon="iconweixinzhifu" class="middle mr-10" type="single" size="60rpx" color="#09BB07"></i-icon>
									微信支付
								</view>
								<view class="right"><radio value="1" color="#FBD220" /></view>
							</view>
						</label>
					</radio-group>
					<button class="goPay" @click="goPay">确认支付</button>
				</view>
			</view>
			<view class="bottoms">
				<text>如有疑问请联系客服：</text>
				<text style="color: #FBB000;" @click="call">4000909987</text>
			</view>
		</view>
		<u-modal
			v-model="mShow6"
			title="温馨提示"
			content="订单系统收款略有延迟，支付成功后可刷新订单查看结果"
			cancel-text="支付失败"
			confirm-text="支付成功"
			confirm-color="#EB5C02"
			:show-cancel-button="true"
			@confirm="confirmHE"
			@cancel="mShow6 = false"
		></u-modal>
	</view>
</template>

<script>
	import {
	  AddMobileContactData
	} from '@/utils/common-api.js'
	export default {
	  data() {
	    return {
	      isPay: false, //是否支付保证金
	      storeId: '', //店铺id
	      payType: null, //支付方式
	      identity: '', //用户角色
	      // CarStore 第一大类（4s店、汽贸店、自营卖车）：4s店、汽贸店、7迈直营车 10000 卖车 买车
	      // Factory 第二大类（主机+车源商）：车源商、主机厂 5000 卖车
	      // BeautyStore 第三大类（养护自营+加盟门店）：美保护精品供应商、7迈直营美护保 无
	      // RepairStore 第四大类（维保货源品牌+经销商）：养护门店、7迈直营养护 无
	      identityList: [{
	        name: 'CarStore',
	        money: '10000.00',
	        label: '4s店服务'
	      },
	      {
	        name: 'Factory',
	        money: '5000.00',
	        label: '车源商'
	      },
	      {
	        name: 'BeautyStore',
	        money: '5000.00',
	        label: '美护保自营'
	      },
	      {
	        name: 'RepairStore',
	        money: '5000.00',
	        label: '经销商'
	      }
	      ],
	      mShow6: false,
	      list: [{
	        name: '同时开通'
	      },
	      {
	        name: '商家端'
	      },
	      {
	        name: '消费端'
	      }
	      ],
	      current: 0,
	      money: '',
	      agree: false
	    }
	  },
	  onLoad(option) {
	    this.storeId = this.$store.state.userInfoDetail.store.storeId
	    this.identity = this.$store.state.user.userInfo.permious
	    // this.isPay = this.$store.state.userInfoDetail.store.isPay
	    console.log(this.storeId, this.identity, this.isPay)
	    if (this.identity === 'CarStore') {
	      this.money = '10000.00'
	    } else {
	      this.money = '5000.00'
	    }
	  },
	  methods: {
	    returnIder() {
	      let it = {}
	      this.identityList.forEach(item => {
	        if (item.name === this.identity) {
	          it = item
	        }
	      })
	      return it
	    },
	    async goPay() {
	      let data = {
	        'orderId': this.storeId,
	        'payModule': 6, //商户端保证金
	        'payPlatform': {
	          'payPlatformType': Number(this.payType),
	          'payPlatformDetailType': 3
	        },
	        // 'returnUrl': 'string'
	      }
	      if (this.agree) {
	        // setTimeout(function() {
	        if (this.payType == 1) {
	          setTimeout(function() {
	            this.mShow6 = true
	          }, 2000)
	        } else {
	          this.mShow6 = false
	        }
	
	        // }, 2000)
	        console.log(data)
	        if (this.payType !== null) {
	          let res = await this.$api.pay.PayStoreDepositBalance(data)
	          try {
	            console.log('支付结果', res.data.data, typeof this.payType)
	            // if (res.code === 200) {
	            // JSON.parse()
	            // this.url = res.data.data
	            let payway = ''
	            if (this.payType === '0') {
	              this.url = res.data.data
	              payway = 'alipay'
	            } else {
	              let data = JSON.parse(res.data.data.parameter)
	              this.url = {
	                appid: data.appid,
	                noncestr: data.noncestr,
	                package: data.package,
	                partnerid: data.partnerid,
	                prepayid: data.prepayid,
	                sign: data.sign,
	                timestamp: data.timestamp,
	              }
	              payway = 'wxpay'
	            }
	            console.log(111, this.url)
	
	            uni.requestPayment({
	              provider: payway,
	              orderInfo: this.url,
	              success: function(res) {
	                console.log('success:', res)
	                // this.mShow6 = true
	                //         uni.redirectTo({
	
	              },
	              fail: function(err) {
	                console.log('err:', err)
	              },
	              complete: () => {
	                console.log('执行了:')
	                uni.redirectTo({
	                  url: '/pages_common/pages_me/paySuccess/paySuccess?paytype=2&id=' +
											this.storeId + '&type=' + this.payType
	                })
									 // // type 支付方式 0支付宝 1微信  paytype支付类型 0订单 1保证金
	                // this.mShow6 = true
	              }
	            })
	            // if (this.payType === '0') {
	            // let id = this.url.split('prepay_id=')[1].split('&package=')[0]
	            // let pack = this.url.split('&package=')[1]
	            // uni.navigateTo({
	            //   url: '/pages_order/payLoading/payLoading?paytype=2&id=' + id + '&pack=' + pack+'&dealId='+this.storeId
	            // })
	
	            // } else if (this.payType === '1') {
	            //   // this.mShow6 = true
	
	            // }
	            // }
	          } catch (err) {
	            console.log(err)
	          }
	        } else {
	          uni.showToast({
	            title: '请先选择支付方式',
	            icon: 'none',
	          })
	        }
	      } else {
	        uni.showToast({
	          title: '请先阅读并同意7迈车保证金协议',
	          icon: 'none',
	        })
	      }
	    },
	    call() {
	      AddMobileContactData(this.$store.state.userInfoDetail.store.storeId)
	      uni.makePhoneCall({
	        phoneNumber: '4000909987' //仅为示例
	      })
	    },
	
	    radioChange(val) {
	      this.payType = val.detail.value
	    },
	    confirmHE() {
	
	      uni.redirectTo({
	        url: '/pages_common/pages_me/paySuccess/paySuccess?paytype=2&id=' + this.storeId + '&type=' +
						this.payType
	      })
	    }
	  }
	}
	
</script>
<style lang="scss" scoped>
	.container {
		.slot-wrap {
			display: flex;
			align-items: center;
			justify-content: left;
		}
	
		background-color: #f6f6f6;
		width: 100%;
		height: 100vh;
		padding-top: 12rpx;
	  padding-bottom: 12rpx;
		.header {
			width: 702rpx;
			height: 210rpx;
			background: #FBD220;
			box-shadow: 0px 0rpx 10rpx 0px rgba(0, 0, 0, 0.14);
			border-radius: 10rpx;
			margin: auto;
			text-align: center;
	
			.line110 {
				line-height: 90rpx;
				padding-top: 10rpx;
			}
	
			.text1 {
				color: #333;
				font-size: 34rpx;
				font-weight: bold;
			}
		}
	
		.boxS {
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
			border-radius: 10rpx;
			padding: 0 20rpx;
			width: 702rpx;
			margin: 0 auto;
		}
	.ispay{
		padding: 20rpx;
	}
	.money{
		font-size: 54rpx;
		color: #333;
		font-weight: bold;
	}
		.jine {
			height: 170rpx;
			margin-top: 23rpx;
	
			.headerss {
				font-size: 30rpx;
				/* font-family: PingFang SC; */
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
				padding-top: 28rpx;
			}
	
			.aaa {
				text-align: center;
			}
	
			.jine-two {
	       padding-top: 2rpx;
				/* margin-left: 37rpx; */
				.jine-two-head {
					font-size: 29rpx;
					/* font-family: PingFang SC; */
					font-weight: 500;
					color: #666666;
					margin-top: 24rpx;
				}
	
				.jine-two-two {
					margin-top: 18rpx;
					font-weight: bold;
					font-size: 54rpx;
					color: #343434;
	
					.text1 {
						font-weight: 500;
						color: #666666;
						font-size: 30rpx;
					}
					
				}
			}
		}
	
		.mids {
			height: 360rpx;
			margin-top: 12rpx;
	
			.m-head {
				font-size: 30rpx;
				height: 87rpx;
				line-height: 87rpx;
				/* font-family: PingFang SC; */
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
			}
	
			.mid-ds {
				display: flex;
				justify-content: space-around;
				align-items: center;
	
				.mid-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
	
					image {
						width: 162rpx;
						height: 166rpx;
					}
				}
			}
	
		}
	
		.payDate {
			margin-top: 23rpx;
			height: 461rpx;
	
			.p-head {
				height: 96rpx;
				line-height: 96rpx;
				border-bottom: 2rpx solid #EEEEEE;
				font-size: 30rpx;
				/* font-family: PingFang SC; */
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
			}
	
			.goPay {
				width: 662rpx;
				height: 88rpx;
				background: linear-gradient(-90deg, #FBD220, #FFE23E);
				border-radius: 44rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				color: #333;
				margin-top: 40rpx;
			}
	
			.pay-mind {
					margin-top: 20rpx;
				.radio-item {
					padding:15rpx 0px;
					font-size: 30rpx;
					color: #666;
					display:flex;
					.left{
						width:50%;
						line-height:60rpx;
						text-align: left;
					}
					.right{
						width:50%;
						line-height:60rpx;
						text-align: right;
					}
				}
			}
		}
	.texttop{
		vertical-align: text-top;
	}
		.bottoms {
			font-size: 26rpx;
			/* font-family: PingFang SC; */
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			padding: 52rpx 24rpx;
	
		}
	}
	.mb_20{
		margin-bottom: 20rpx !important;
	}
	.line38{
						line-height: 76rpx !important;
					}
	.inline-block{
		display: inline-block;
	}
</style>
